<template>
    <div class="resour">
        <el-table :data="tableData" border >
            <el-table-column prop="id" label="编号" width="60" height="40"></el-table-column>
            <el-table-column prop="name" label="资源名称" width="280" height="40"></el-table-column>
            <el-table-column prop="url" label="资源路径" width="280" height="40"></el-table-column>
            <el-table-column prop="description" label="描述" width="280" height="40"></el-table-column>
            <el-table-column label="添加时间" width="280" height="40">
                <!-- slot 插槽写法  scope就是作用域插槽 ， scope.row 就是数据 -->
                <template #default="scope">
                    <div>
                        {{ scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" :page-sizes="[10, 20, 50, 100]"
             layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import * as api from '../../request/api'
import dayjs from 'dayjs'
import useTable from '../../hooks/useTables'


let { tableData, getTableData, pagination } = useTable(api.admin.getresource, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    
})
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}
</script>

<style lang="scss" scoped>
.resour {
    width: 100%;
    height: 100%;
    margin-top: 60px;
    margin-bottom: 20px;;
    .el-pagination{
        float: right;
    }
}
</style>